<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>编辑优惠券</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script type="text/javascript" src="./js/urlToFile.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="x-body">
    <form class="layui-form">
        <input type="hidden" name="cid" id="cid">
        <div class="layui-form-item">
            <label  class="layui-form-label">
                优惠券名称
            </label>
            <div class="layui-input-inline">
                <input type="text" id="couponname" name="couponname" class="layui-input" placeholder="请输入优惠券名称">
            </div>
        </div>

        <div class="layui-form-item">
            <label  class="layui-form-label">
                类型
            </label>
            <div class="layui-input-inline">
                <select name="coupontype" id="coupontype">
                    <option value="现金券">现金券</option>
                    <option value="折扣券">折扣券</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label  class="layui-form-label">
                优惠金额
            </label>
            <div class="layui-input-inline">
                <input type="text" id="couponprice" name="couponprice" class="layui-input">
            </div>
            <label  class="layui-form-label" style="margin-left: -90px">元 </label>
            <label  class="layui-form-label">满</label>
            <div class="layui-input-inline">
                <input type="text" id="coupontoprice" name="coupontoprice" class="layui-input">
            </div>
            <label  class="layui-form-label" style="margin-left: -50px">元可用？ </label>
        </div>

        <div class="layui-form-item">
            <label  class="layui-form-label">
                有效期
            </label>
            <div class="layui-input-inline">
                <input type="radio"  name="coupontime" lay-filter="radio-filter" value="0" title="指定有效期">
            </div>
            <div class="layui-input-inline">
                <input type="radio" name="coupontime" lay-filter="radio-filter" value="1" title="领取后几天内有效" checked>
            </div>
        </div>

        <div class="layui-form-item" id="dateTime">
            <div class="layui-input-inline" style="margin-left: 110px">
                <input type="text" id="coupondateday" name="coupontime" value="30" class="layui-input">
            </div>
            <label class="layui-form-label" style="margin-left: -54px">天内有效</label>
        </div>

        <div class="layui-form-item" id="dateRange" style="display: none">
            <div class="layui-input-inline" style="margin-left: 110px">
                <input  type="text" class="layui-input" name="coupontime"  id="coupondaterange" placeholder="请选择起止日期">
            </div>
        </div>



        <div class="layui-form-item">
            <label class="layui-form-label">
                优惠券描述
            </label>
            <div class="layui-input-inline">
                <textarea name="coupondesc" id="coupondesc" placeholder="请输入优惠券描述，用户将在手机端看到该描述" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">
                优惠券图片
            </label>
            <div class="layui-input-inline">
                <button type="button" class="layui-btn" id="couponImgSelect">
                    <i class="layui-icon">&#xe67c;</i>选择图片
                </button>
                <img src="" id="couponImg" class="carouselImg" style="width: 90px">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">
                发行总量(张)
            </label>
            <div class="layui-input-inline">
                <input type="text" id="couponnum" name="couponnum" class="layui-input">
            </div>

            <label class="layui-form-label">
                每人限领(张)
            </label>
            <div class="layui-input-inline">
                <input type="text" id="couponlimit" name="couponlimit" class="layui-input">
            </div>
        </div>



        <div class="layui-form-item">
            <label  class="layui-form-label">
                使用范围
            </label>
            <div class="layui-input-inline">
                <input type="radio" name="coupongoods"  lay-filter="radio-filter" value="2" title="全场通用" checked>
            </div>
            <div class="layui-input-inline">
                <input type="radio" name="coupongoods" lay-filter="radio-filter" value="3" title="指定商品" >
            </div>
            <div class="layui-input-inline" id="coupongoods" style="display: none">
                <input  type="text" class="layui-input" name="coupongoods"  id="goodsSelect" placeholder="输入关键字搜索商品">
            </div>
            <div class="layui-input-inline" id="searchGoodsSelect" style="display: none">
                <!--                    <div style="background: #00F7DE;border-radius: 2px;width: 200px;height: 20px;text-align: center">-->
                <!--                        <span><i class="layui-icon">&#xe605;</i>香蕉<i style="margin-left: 10px" class="layui-icon" onclick="del()">&#x1006;</i></span>-->
                <!--                    </div>-->

            </div>
        </div>

        <div class="layui-form-item">
            <label  class="layui-form-label">
            </label>
            <button  class="layui-btn" lay-filter="editCoupon" lay-submit="" id="editCoupon">
                保存
            </button>
        </div>
    </form>
</div>
<script>

    /*删除数组中指定下标的元素,arr-数组,item-元素值*/
    function remove(arr, item) {
        for(var i=arr.length-1;i>=0;i--)
        {
            if(arr[i]==item)
            {
                arr.splice(i,1);
            }
        }
        return arr;
    }

    /*进点击的商品id保存*/
    var coupongoodsArry=[]
    function getGoods(gid){
        coupongoodsArry.push(gid)
        var item='<i  class="layui-icon icon'+gid+'">&#xe605;</i><i  style="margin-left: 10px" class="layui-icon icon'+gid+'" onclick="delGoods('+gid+')">&#x1006;</i>'
        $('#id'+gid).append(item)
        layer.alert('商品已添加', {icon: 6});
    }

    function delGoods(gid) {
        // alert("删除")
        remove(coupongoodsArry,gid)
        layer.alert('商品已删除', {icon: 5});
        //    清除div中的icon
        $('.icon'+gid).remove()
    }
    layui.use(['upload','form','layer','laydate','dropdown'], function(){
        $ = layui.jquery;
        var form = layui.form
            ,layer = layui.layer
            ,upload = layui.upload
            ,laydate=layui.laydate

        //当鼠标位于input上面有输入的时候
        $('#goodsSelect').on('compositionend',e=>{
            var keyword = e.delegateTarget.value;
            console.log(keyword)
            //请求即可
            $.ajax({
                url: 'http://localhost:8080/goods/getGoodsByKey/'+keyword,
                processData:false,
                contentType:false,
                async:false,
                dataType:'json',
                success:function(res){
                    $('#searchGoodsSelect').empty()
                    console.log(res)
                    data = res.data
                    for (var i=0;i<data.length;i++){
                        // var item='<option onclick="getGoods('+data[i].gid+')" id="'+data[i].gid+'" value="'+data[i].gid+'">'+data[i].goodstitle+'</option>'
                        var item='<div id="id'+data[i].gid+'"  style="background: #00F7DE;border-radius: 2px;width: 200px;height: 20px;text-align: center;margin: 2px;">\n' +
                            '                        <span>'+data[i].goodstitle+'</span><i onclick="getGoods('+data[i].gid+')" class="layui-icon">&#xe654;</i>\n' +
                            '                    </div>'
                        $('#searchGoodsSelect').append(item)
                    }
                }
            })
        })



        laydate.render({
            elem: '#coupondaterange',//指定html中的id
            range:'~' //自定义分割字符
        })

        var couponimg;
        upload.render({
            elem: '#couponImgSelect'
            ,multiple: false //多文件上传为true
            ,accept: 'file'//指定允许上传时校验的文件类型
            ,auto: false  //自动上传为true
            ,choose: function(obj){//选择完文件后的回调函数
                obj.preview(function (index, file, result) {
                    couponimg=file
                    console.log(couponimg);
                    $('#couponImg').attr('src', result); //图片链接（base64）直接将图片地址赋值给img的src属性
                });
            }
        })

        // radio 点击事件
        form.on('radio(radio-filter)', function(data) {
            var elem = data.elem; // 获得 radio 原始 DOM 对象
            var checked = elem.checked; // 获得 radio 选中状态
            var value = elem.value; // 获得 radio 值
            var othis = data.othis; // 获得 radio 元素被替换后的 jQuery 对象
            // layer.msg(['value: '+ value, 'checked: '+ checked].join('<br>'));
            if (value==0){
                $('#dateTime').css({"display":"none"});
                $('#dateRange').css({"display":"block"});
            } else if(value==1){
                $('#dateTime').css({"display":"block"});
                $('#dateRange').css({"display":"none"});
            } else if (value==2){
                $('#coupongoods').css({"display":"none"});
                coupongoods=0
            } else if (value==3){
                $('#coupongoods').css({"display":"block"});
                $('#searchGoodsSelect').css({"display":"block"});
            }
        })

        form.on('submit(editCoupon)',function (data){
            // var imgUrl = $('#couponImg')[0].src
            // alert(imgUrl)
            // setInitImg(imgUrl,(file)=>{
            //     couponimg=file
            //     alert(file)
            // })
            // var item=null
            // getImageFileFromUrl(imgUrl,"20230513").then((response)=>{
            //     // 返回的是文件对象，使用变量接收即可
            //     alert(4)
            //     item  = response
            // }).catch((e)=>{
            //     alert(5)
            //         console.error(e)
            // })
            // alert(6)
            // alert(item)

            var coupondaterange
            var coupondateday
            var val=$('input:radio[name="coupontime"]:checked').val();
            if (val==0){
                coupondaterange=$('#coupondaterange').val()
                coupondateday=0
            }else{
                coupondateday=$('#coupondateday').val()
                coupondaterange=0
            }

            var coupongoods
            var val=$('input:radio[name="coupongoods"]:checked').val();
            if (val==2){
                coupongoods="全部商品"
            }else{
                coupongoods=coupongoodsArry
            }
            var formData=new FormData()
            formData.append("file",couponimg)
            formData.append("couponname",$('#couponname').val())
            formData.append("cid",$('#cid').val())
            formData.append("coupontype",$('#coupontype').val())
            // formData.append("couponprice",$('#couponprice1').val()+"元(满"+$('#couponprice2').val()+"元可用)")
            formData.append("couponprice",$('#couponprice').val())
            formData.append("coupontoprice",$('#coupontoprice').val())
            // formData.append("coupontime",coupontime)
            formData.append("coupondateday",coupondateday)
            formData.append("coupondaterange",coupondaterange)
            formData.append("coupondesc",$('#coupondesc').val())
            formData.append("couponnum",$('#couponnum').val())
            formData.append("couponlimit",$('#couponlimit').val())
            formData.append("coupongoods",coupongoods)
            console.log(formData.toString())
            $.ajax({
                url: 'coupon/editCoupon',
                type:'post',
                data:formData,
                processData:false,
                contentType:false,
                async:false,
                dataType:'json',
                success:function (res){
                    // layer.alert('添加成功', {icon: 6});
                    alert('修改成功')
                    console.log(res)
                    layer.msg('修改成功', {icon: 1});
                }

            })

        })




    });
</script>
<script>var _hmt = _hmt || []; (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();</script>
</body>

</html>